這篇文章要介紹如何利用 CSS 創建一個基本的滑動幻燈片(Slider),實現平滑的圖片過渡效果
創建一個名為 slider-wrapper
的容器,其中包含三張圖片,這樣每張圖片都能在同一個容器中顯示,並實現滑動效果
<div class="slider-wrapper">
<img class="slider-item" src="picture1.jpeg" alt="Slide1">
<img class="slider-item" src="picture2.png" alt="Slide 2">
<img class="slider-item" src="picture3.jpg" alt="Slide 3">
</div>
slider-item
類別來進行統一樣式控制使用 Flexbox
將 body
的內容在水平方向和垂直方向上都居中顯示,讓幻燈片位於畫面正中間,並利用 height
設置高度,佔滿整個視窗
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f5f5f5;
}
設定 slider-wrapper
的大小,確保容器的大小固定能夠正常顯示圖片,及隱藏超出範圍的內容
.slider-wrapper {
width: 400px;
height: 300px;
overflow: hidden;
position: relative;
}
設定每張圖片的樣式,確保它們能夠重疊顯示,並添加動畫效果
.slider-item {
width: 100%;
height: 100%;
position: absolute;
transform: translateX(100%);
opacity: 0;
animation: slide 12s infinite;
}
slide
的動畫,每 12 秒會重複一次為了實現圖片的逐個顯示,每張圖片設置不同的動畫延遲時間
.slider-item:nth-child(1) {
animation-delay: 0s;
}
.slider-item:nth-child(2) {
animation-delay: 4s;
}
.slider-item:nth-child(3) {
animation-delay: 8s;
}
定義每張圖片在時間進程中的變化,透過 transform
和 opacity
實現圖片的顯示、隱藏和滑動效果
@keyframes slide {
0%, 20% {
transform: translateX(0);
opacity: 1;
}
25%, 45% {
transform: translateX(-100%);
opacity: 1;
}
50% {
transform: translateX(-100%);
opacity: 0;
}
55%, 100% {
transform: translateX(100%);
opacity: 0;
}
}
translateX(-100%)
,此時仍然可見opacity: 1
opacity: 0
,表示當前圖片已經完全滑出畫面,準備進入下一張圖片translateX(100%)
,並保持不可見,確保當前圖片完全滑出後,能夠為下一張圖片的進入留出空間